<template>
	
    <header id='head_top'>
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
			<defs>
				<symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" id="saomiao">
				<path d="M868.6 96H720c-7.6 0-15.2 2.9-21 8.7s-8.7 13.4-8.7 21 2.9 15.2 8.7 21 13.4 8.7 21 8.7h148.6V304c0 7.6 2.9 15.2 8.7 21s13.4 8.7 21 8.7 15.2-2.9 21-8.7 8.7-13.4 8.7-21V155.4c0-32.8-26.6-59.4-59.4-59.4zM928 868.6V720c0-7.6-2.9-15.2-8.7-21s-13.4-8.7-21-8.7-15.2 2.9-21 8.7-8.7 13.4-8.7 21v148.6H720c-7.6 0-15.2 2.9-21 8.7s-8.7 13.4-8.7 21 2.9 15.2 8.7 21 13.4 8.7 21 8.7h148.6c32.8 0 59.4-26.6 59.4-59.4zM155.4 928H304c7.6 0 15.2-2.9 21-8.7s8.7-13.4 8.7-21-2.9-15.2-8.7-21-13.4-8.7-21-8.7H155.4V720c0-7.6-2.9-15.2-8.7-21-5.8-5.8-13.4-8.7-21-8.7s-15.2 2.9-21 8.7-8.7 13.4-8.7 21v148.6c0 32.8 26.6 59.4 59.4 59.4zM96 155.4V304c0 7.6 2.9 15.2 8.7 21 5.8 5.8 13.4 8.7 21 8.7s15.2-2.9 21-8.7c5.8-5.8 8.7-13.4 8.7-21V155.4H304c7.6 0 15.2-2.9 21-8.7s8.7-13.4 8.7-21-2.9-15.2-8.7-21-13.4-8.7-21-8.7H155.4C122.6 96 96 122.6 96 155.4zM898.3 541.7H125.7c-16.4 0-29.7-13.3-29.7-29.7s13.3-29.7 29.7-29.7h772.6c16.4 0 29.7 13.3 29.7 29.7s-13.3 29.7-29.7 29.7z" p-id="2159"></path>
				</symbol>
				
				
			</defs>
		</svg>
        <slot name='logo'></slot>
        <slot name='search'></slot>
        <!-- <section class="head_goback" v-if="goBack" @click="$router.go(-1)">
            <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:2"/>
            </svg>
        </section> -->
		<!-- <router-link to="saomiao"  class="head_login">
      
				
			<svg class="user_avatar">
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#saomiao"></use>
			</svg>
			
        </router-link> -->
        <section class="title_head ellipsis" v-if="headTitle">
            <span class="title_text">{{headTitle}}</span>
        </section>
        <slot name="edit"></slot>
        <slot name="msite-title"></slot>
        <slot name="changecity"></slot>
        <slot name="changeLogin"></slot>
    </header>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    export default {
    	data(){
            return{

            }
        },
        mounted(){
            //获取用户信息
            this.getUserInfo();

        },
        props: ['signinUp', 'headTitle', 'goBack'],
        computed: {
            ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            ...mapActions([
                'getUserInfo'
            ]),
        },

    }

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';

    #head_top{
        background-color: $blue;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        @include wh(100%, 1.95rem);
    }
    .head_goback{
        left: 0.4rem;
        @include wh(0.6rem, 1rem);
        line-height: 2.2rem;
        margin-left: .4rem;
    }
    .head_login{
        right: 0.55rem;
        @include sc(0.65rem, #fff);
        @include ct;
        .login_span{
            color: #fff;
        }
        .user_avatar{
            fill: #fff;
            @include wh(.8rem, .8rem);
        }
    }
    .title_head{
        @include center;
        width: 50%;
        color: #fff;
        text-align: center;
        .title_text{
            @include sc(0.8rem, #fff);
            text-align: center;
            font-weight: bold;
        }
    }
</style>
